﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="../css/viewer.css" />

    <script src="../js/viewer.js"></script>
</head>
<body>
    <section id="ViewerContainer">
        <section id="FlipperTemplate" data-win-control="WinJS.Binding.Template">
            <div class="flipperitem">
                <img data-win-bind="src: src" />
                <!--<article data-win-bind="innerHTML: text"></article>-->
            </div>
        </section>
        <section id="Viewer">
            <section id="FlipperContainer">
                <div id="Flipper" data-win-control="WinJS.UI.FlipView"
                     data-win-options="{ itemTemplate: FlipperTemplate, itemDataSource: HL.Viewer.Data.imageList.dataSource }"></div>
            </section>
            <header>
                <section>
                    <h1 data-win-bind="innerHTML: Viewer.Data.title"></h1>
                </section>
                <section>
                    <p></p>
                </section>
            </header>
        </section>
        <section id="AppBar" data-win-control="WinJS.UI.AppBar"
                 data-win-options="{ layout: 'custom' }">
            <section id="AppBarContent">
                <section id="Processor">
                    <progress class="win-ring win-medium"></progress>
                    <p>Processing</p>
                </section>
                <section id="Loader">
					<progress data-win-bind="value: Viewer.Data.loadProgress" max="100"></progress>
					<p><span data-win-bind="innerHTML: Viewer.Data.loadProgress"></span>%</p>
                </section>
                <section id="Player">
                    <button data-win-control="WinJS.UI.AppBarCommand"
					data-win-options="{ label: 'Play', icon: 'play', id: 'play' }"></button>
                    <button data-win-control="WinJS.UI.AppBarCommand"
					data-win-options="{ label: 'Stop', icon: 'stop', id: 'stop' }"></button>
                </section>
            </section>
        </section>
        <section id="NavBar" data-win-control="WinJS.UI.NavBar">
            <div id="TopNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"
                 data-win-options="{ data: HL.NavBarData }"></div>
            <div id="BottomNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"
                 data-win-options="{ data: HL.Viewer.NavBarData, maxRows: 2 }"></div>
        </section>
    </section>
</body>
</html>